<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
		<meta http-equiv="content-security-policy"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
			height: 100%;
	    }
	    .swiper-slide {
			background-position: center;
			background-size: cover;
			width: 100%;
			height: 200px;
	    }
	    .goods-attribute {
	    		width: 100%;
	    		margin-top: 10px;
	    }
	    .goods-name {
	    		color: #505050;
	    		font-family: "PingFang-SC-Regular";
	    		padding-left: 14px;
	    		display: inline-block;
	    		width: 70%;
	    }
	    .goods-price {
	    		padding-right: 10px;
	    		display: inline-block;
	    		width: 28%;
	    		text-align: right;
	    }
	    .symbol-span {
	    		font-size: 10px;
	    		color: #E58014;
	    		font-family: "PingFang-SC-Regular";
	    }
	    .price-span {
	    		font-size: 18px;
	    		color: #E58014;
	    		font-family: "PingFang-SC-Regular";
	    }
	    .goods-attribute-bottom {
	    		margin-left: 14px;
	    		margin-top: 20px;
	    }
	    .praise-menu-icon {
	    		display: inline-block;
	    		margin-right: 20px;
	    		width: 25px;
	    		height: 25px;
	    		background-image: url(../img/goods/praise_norm_icon.png);
	    		background-size: 100% 100%;
	    }
	    .collection-menu-icon {
	    		display: inline-block;
	    		margin-right: 20px;
	    		width: 25px;
	    		height: 25px;
	    		background-image: url(../img/goods/collection_norm_icon.png);
	    		background-size: 100% 100%;
	    }
	    .line-div {
			width: 92%;
			height: 1px;
			margin-top: 5px;
			margin-left: 4%;
			background-color: #C5C5C5;
		}
		.goods-mark-div {
			margin: 15px 14px 12px 14px;
		}
		.goods-mark {
			font-family: "PingFang-SC-Regular";
			color: #737373;
			font-size: 15px;
		}
		.mark-title-container {
			margin-top: 8px;
		}
		.item-title {
			margin-right: 5px;
			height: 30px;
			color: #9F9F9F;
			line-height: 30px;
			margin-bottom: 3px;
			border:1px solid #C5C5C5;
			border-radius: 15px;
			padding: 0px 15px;
			display: inline-block;
			font-size: 13px;
			font-family: "PingFang-SC-Regular";
		}
		.comment-container {
			margin-top: 17px;
		}
		.comment-title-div {
			margin-left: 14px;
		}
		.comment-left-div {
			display: inline-block;
		}
		.comment-icon {
			width: 18px;
			height: 14px;
			vertical-align: middle;
		}
		.comment-title {
			font-family: "PingFang-SC-Regular";
			color: #737373;
			font-size: 15px;
		}
		.comment-num {
			margin-right: 13px;
			float: right;
			display: inline-block;
			font-family: "PingFang-SC-Regular";
			color: #9F9F9F;
			font-size: 12px;
		}
		.comment-content-div {
			padding: 10px;
		}
		.comment-content-div .left-div {
			vertical-align: middle;
		}
		.comment-header-img {
			width: 25px;
			height: 25px;
			border-radius: 13px;
			vertical-align: middle;
		}
		.comment-username {
			font-size: 10px;
			margin-left: 5px;
			color: #8E8E8E;
			vertical-align: middle;
			font-family: "PingFang-SC-Regular";
		}
		.comment-content-div .right-div {
			display: inline-block;
			width: 100%;
			margin-top: 5px;
			vertical-align: middle;
		}
		.comment-content {
			font-size: 12px;
			color: #9F9F9F;
			font-family: "PingFang-SC-Regular";
		}
		.comment-date-div {
			
		}
		.comment-date-div .date{
			font-size: 10px;
			color: #9F9F9F;
			font-family: "PingFang-SC-Regular";
		}
		.comment-date-div .star-div {
			display: inline-block;
		    vertical-align: middle;
		    float: right;
		    margin-right: 5px;
		}
		.star-icon {
			width: 15px;
			height: 15px;
			margin-right: 5px;
		}
		.goods-detail-div {
			margin-top: 10px;
			width: 100%;
		}
		.goods-detail-title-div{
			margin: 10px 0px 10px 14px;
		}
		.goods_title-icon {
		    width: 16px;
		    height: 15px;
		    vertical-align: middle;
		}
		.goods_title {
			color: #737373;
			font-size: 15px;
			font-family: "PingFang-SC-Regular";
		}
		.goods-detail-img {
			width: 100%;
		    display: block;
		}
		/**---------弹出商品规格---------**/
		.bounced-box-container {
			display: none;
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0px;
			top: 0px;
		    z-index: 10;
	        overflow-y: scroll;
			background-color: rgba(0, 0, 0, 0.7);
		}
		.bounced-box-container .outside {
			width: 100%;
			height: 400px;
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.bounced-box-container .outside .box {
			margin-top: 20px;
			width: 100%;
			height: 380px;
			background-color: #FFFFFF;
		}
		.goods-min-img {
			width: 119px;
			height: 119px;
			position: absolute;
			top: 0px;
			left: 14px;
			border-radius: 10px;
		}
		.specifications-div {
			width: 300px;
			height: 100px;
			padding-left: 140px;
			display: table-cell;
  			vertical-align:middle;
		}
		.specifications-div .symbol-span {
			font-size: 10px;
			font-family: "PingFang-SC-Regular";
			color: #E58014;
		}
		.specifications-div .price-span {
			font-size: 18px;
			font-family: "PingFang-SC-Regular";
			color: #E58014;
		}
		.specifications-div .price-span-hide, .merchant-phone {
			display: none;
		}
		.specifications-span {
			font-size: 13px;
			font-family: "PingFang-SC-Regular";
			color: #B1B1B1;
		    line-height: 25px;
		}
		.stock-span-hide {
			display: none;
		}
		.close-div {
		    position: absolute;
		    top: 35px;
		    right: 10px;
			width: 20px;
			height: 20px;
			background-image: url(../img/goods/close_icon.png);
			background-size: 100% 100%;
		}
		.specifications-content-div {
		    width: 100%;
		    height: 250px;
		    padding-bottom: 50px;
		    overflow-y: scroll;
		}
		.item-specifications {
			margin: 10px 14px 0px 14px;
		}
		.specifications-title {
			font-size: 10px;
			color: #717171;
			font-family: "PingFang-SC-Regular";
		}
		.specifications-item-title {
			height: 30px;
			margin-bottom: 3px;
			border:1px solid #C5C5C5;
			border-radius: 15px;
			margin-right: 10px;
			padding: 0px 15px;
			display: inline-block;
		}
		.specifications-item-title.selected {
		    color: #FFFFFF;
			background-color: #013662;
		}
		.change-number-container {
			position: relative;
			margin: 20px 14px 0px 14px;
		}
		.shop-arithmetic{width:84px;box-sizing:border-box;white-space:nowrap;height:100%;}
		.shop-arithmetic a{display:inline-block;width:23px;height:22px;line-height:22px;text-align:center;background:#fff;font-size:16px;}
		.shop-arithmetic .minus{display: inline-block; background-image: url(../img/goods/btn_jian.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-arithmetic .failed{color:#d1d1d1;}
		.shop-arithmetic .plus{display: inline-block;  background-image: url(../img/goods/btn_jia.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-arithmetic .minus:active{display: inline-block; background-image: url(../img/goods/btn_jian_w.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-arithmetic .plus:active{display: inline-block;  background-image: url(../img/goods/btn_jia_w.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-arithmetic .num{width:32px;text-align:center;border:none;display: inline-block;height:100%;box-sizing:border-box;vertical-align:top;margin:0 -6px;}
		.change-number-title {
			position: absolute;
			top: 0px;
			right: 0px;
			color: #494949;
			font-size: 14px;
			font-family: "PingFang-SC-Regular";
		}
		.confirm-btn {
			position: fixed;
			left: 0px;
			bottom: 0px;
			height: 49px;
			width: 100%;
			padding: 0px;
			border-radius: 0px;
			background-color: #013662;
			border: 1px solid #013662;
			text-align: center;
			line-height: 49px;
			font-size: 17px;
			color: #FFFFFF;
			font-family: "PingFang-SC-Regular";
		}
		/**---------弹出商品规格---------**/
		.bounced-menu-div {
			width: 60px;
			position: fixed;
			z-index: 5;
			left: 0px;
			bottom: 80px;
		}
		.item-back-div {
			width: 45px;
			height: 33px;
			margin-top: 15px;
			background-image: url(../img/goods/image_back.png);
			background-size: 100% 100%;
		}
		.item-homepage-div {
			width: 45px;
			height: 33px;
			background-image: url(../img/goods/image_go_homepage.png);
			background-size: 100% 100%;
		}
		.item-shoppingcar-div {
			width: 45px;
			height: 33px;
			margin-top: 15px;
			background-image: url(../img/goods/image_shoppingcar.png);
			background-size: 100% 100%;
		}
		.item-call-div {
			width: 50px;
			height: 50px;
			margin-top: 15px;
			background-image: url(../img/goods/image_call.png);
			background-size: 100% 100%;
		}
		.standard-name {
			line-height: 30px;
			font-size: 13px;
			font-family: "PingFang-SC-Regular";
		}
		.standard-span {
			display: none;
		}
		.isChoose-span {
			display: none;
		}
		.payment-bar{
			clear:both;
			overflow:hidden;
			width:100%;height:49px;
			position:fixed;
			bottom:0;
			border-top:1px 
			solid #e0e0e0;
			background:#fff;
		}
		.payment-bar .add-shopping-car{
			display:inline-block;
			float:right;
			width:45%;
			height:49px;
			line-height:49px;
			text-align:center;
			color:#fff;
			font-family: "PingFang-SC-Regular"; 
			font-size:15px;
			background:#e58014;
		    border-left-color: #FFFFFF;
		    border-left-style: solid;
		    border-left-width: 1px;
		}
		.payment-bar .buy-now{
			display:inline-block;
			float:right;
			width:35%;
			height:49px;
			line-height:49px;
			text-align:center;
			color:#fff;
			font-family: "PingFang-SC-Regular"; 
			font-size:15px;
			background:#e51414;
		}
		.payment-bar .call {
			display:inline-block;
			float:right;
			width:20%;
			height:49px;
			text-align:center;
		}
		.payment-bar .call .call-img{
			width: 25px;
			height: 25px;
			margin-top: 13px;
		}
		.merchant-detail-div {width: 100%; position: relative;}
		.merchant-detail-div .merchant-image-div {display: inline-block; margin-top: 27px; margin-left: 13px;}
		.merchant-detail-div .merchant-image-div .merchant-image {width: 40px; height: 40px;}
		.merchant-detail-div .merchant-info {position: absolute; left: 70px; top: 27px;}
		.merchant-detail-div .merchant-info .merchant-name {font-size: 17px; color: #838383; font-family: "PingFang-SC-Regular";}
		.merchant-detail-div .review-info {width: 100%;}
		.merchant-detail-div .review-info .goods-info {display: inline-block; margin-right: 20px; text-align: center; margin-left: 10px; margin-top: 5px;}
		.merchant-detail-div .review-info .goods-info .num{font-size: 14px; font-weight: 500;}
		.merchant-detail-div .review-info .goods-info .title{font-size: 14px; color: #737373;}
		.merchant-detail-div .review-info .addr{display: inline-block; float: right;margin-top: 15px; margin-right: 20px;}
		.merchant-detail-div .review-info .addr img{width: 15px; height: 21px; vertical-align: middle;}
		.merchant-detail-div .review-info .addr span{font-size: 14px; color: #737373;}
		#infoImageList {
			margin-bottom: 49px;
		}
		.seckill-div {
			display: none;
			height: 40px;
			background-color: #f8a5b4;
			line-height: 40px;
		}
		.seckill-btn .mui-btn {
			margin-top: 5px;
			margin-left: 15px;
			margin-right: 5px;
			padding: 4px 12px;
			border-radius: 12px;
			color: #fff;
			background-color: #ee2e52;
		}
		.seckill-btn span {
			font-size: 14px;
		}
		.distance-start {
			font-size: 14px;
			margin-right: 10px;
		}
		.original-price {
			display: none;
			margin-left: 5px;
			font-size: 12px;
			color: #8C8A8A;
			text-decoration: line-through;
		}
	</style>
	<body>
		<div class="mui-content">
            <div class="swiper-container">
				<div class="swiper-wrapper"></div>
		    		<!-- Add Pagination -->
	    			<div class="swiper-pagination"></div>
			</div>
			<div class="seckill-div space-between">
				<div class="seckill-btn">
					<button type="button" class="mui-btn">抢购</button><span>抢购中</span>
				</div>
				<div class="distance-start"><span>距结束：<span id="countDown">00:00:00</span></span></div>
			</div>
			<div class="goods-attribute">
				<div class="goods-attribute-top">
					<div class="goods-name"></div>
					<div class="goods-price"><span class="symbol-span">¥</span><span class="price-span"></span><span class="original-price"></span></div>
				</div>
				<div class="goods-attribute-bottom">
					<div class="praise-menu-icon"></div>
					<div class="collection-menu-icon"></div>
				</div>
				<div class="line-div"></div>
			</div>
			<div class="goods-mark-div">
				<div class="goods-mark">商品印记</div>
				<div class="mark-title-container">
					<!--<div class="item-title">哈哈 15</div>-->
				</div>
			</div>
			<div class="line-div"></div>
			<div class="comment-container">
				<div class="comment-title-div">
					<div class="comment-left-div">
						<img class="comment-icon" src="../img/goods/comment_img.png" />
						<span class="comment-title"></span>
					</div>
					<div class="comment-num"></div>
				</div>
				<div id="commentList">
					<!--<div class="comment-content-div">
						<div class="left-div">
							<img class="comment-header-img" src="../img/index/chihuo_icon.png" />
							<div class="comment-username">宅小U</div>
						</div>
						<div class="right-div">
							<div class="comment-content">收费岗的水电费告诉地方的什么的都是一些好的，就是 放大看见对方问问。</div>
							<div class="comment-date-div">
								<span class="date">2018.3.10 12:12</span>
								<div class="star-div">
									<img class="star-icon" src="../img/index/chihuo_icon.png" />
									<img class="star-icon" src="../img/index/chihuo_icon.png" />
									<img class="star-icon" src="../img/index/chihuo_icon.png" />
									<img class="star-icon" src="../img/index/chihuo_icon.png" />
								</div>
							</div>
						</div>
					</div>-->
				</div>
			</div>
			<div class="line-div"></div>
			<div class="merchant-detail-div">
				<div class="merchant-image-div"><img class="merchant-image" /></div>
				<div class="merchant-phone"></div>
				<div class="merchant-info">
					<div class="merchant-name"></div>
				</div>
				<div class="review-info">
					<div class="goods-info">
						<div class="num"></div>
						<div class="title">全部商品</div>
					</div>
					<div class="addr"><img src="../img/goods/location_icon.png" /> <span></span></div>
				</div>
			</div>
			<div class="line-div"></div>
			<div class="goods-detail-div">
				<video x5-video-player-type="h5" id="video" width="100%" height="210" controls="controls" ></video>
				<div class="goods-detail-title-div">
					<img class="goods_title-icon" src="../img/goods/goods_title_img.png" />
					<span class="goods_title">商品详情（图文视频介绍）</span>
				</div>
				<div id="infoImageList">
					<!--<img class="goods-detail-img" src="../img/index/tuijian_bg.png" />-->
				</div>
			</div>
			<div class="bounced-menu-div">
				<div id="itempay" class="item-homepage-div" data-id="1"></div>
				<div id="itemshoppingcar" class="item-shoppingcar-div" data-id="2"></div>
				<div id="itemback" class="item-back-div" data-id="0"></div>
			</div>
			<div class="bounced-box-container">
				<div class="outside">
					<div class="box">
						<img class="goods-min-img" />
						<div class="specifications-div">
							<div><span class="symbol-span">¥ </span><span class="price-span"></span><span class="price-span-hide"></span></div>
							<div id="stockDiv" class="specifications-span"></div>
							<div class="stock-span-hide"></div>
							<div id="standardDiv" class="specifications-span">请选择规格</div>
						</div>
						<div class="close-div"></div>
						<div class="line-div" style="margin-top: 10px;"></div>
						<div class="specifications-content-div">
							<div id="specificationsID">
								<!--<div class="item-specifications">
									<div class="specifications-title">规格一</div>
									<div class="mark-title-container">
										<div class="specifications-item-title">红色</div>
										<div class="specifications-item-title">黄色</div>
										<div class="specifications-item-title">绿色</div>
										<div class="specifications-item-title">蓝色</div>
									</div>
								</div>-->
							</div>
							<div class="line-div" style="margin-top: 10px;"></div>
							<div class="change-number-container">
								<div class="shop-arithmetic">
									<div class="minus"></div>
									<span class="num" >1</span>
									<div class="plus"></div>
								</div>
								<div class="change-number-title">购买数量</div>
							</div>
						</div>
						<button class="confirm-btn">确认</button>
					</div>
				</div>
			</div>
			<div class="payment-bar">
				<div class="add-shopping-car">加入购物车</div>
				<div class="buy-now">立即购买</div>
				<div class="call">
					<img class="call-img" src="../img/goods/phone_icon.png" />
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var userID = base.getParameter("userID");
		var goodsID = base.getParameter("goodsID");
		var merchantID = base.getParameter("merchantID");
		var isPraise = -1; //是否点赞
		var isCollection = -1; //是否收藏
		var standardDataList = []; //商品规格数据
		var standardPriceList = []; //商品规格组装后的的价钱 库存等数据
		var tempStandardID = 0;
		var isBuyNow = 0; //0表示先加入购物车 1表示立即购买
		var tempStandardName = ""; //选择的商品规格 默认为空
		var tempStandard = ""; //选择的商品规格id组合
		var tempStatus  = 1; //1：上架 0：下架
		var isSeckill = 0,seckillID="";//是否是秒杀商品和秒杀ID
	    $(function () {
	    		var url = base.url.getGoodsInfo;
			var data = {
				userID: userID,
				goodsID: goodsID
			}
			base.postData(url,data,getGoodsInfoSuccess);
			var swiper = new Swiper('.swiper-container', {
				autoplay:true,//自动播放
				initialSlide :0,
				observer:true,//修改swiper自己或子元素时，自动初始化swiper
    				observeParents:true,//修改swiper的父元素时，自动初始化swiper
		      	pagination: {
		        		el: '.swiper-pagination',
		      	}
		    });
		});
		function getGoodsInfoSuccess(data) {
			if (data.success) {
				var bannerList = data.context.bannerList;
				var goodsMarkList = data.context.goodsMark;
				var evaluateList = data.context.evaluateList;
				var infoImageList = data.context.infoImageList;
				if (data.context.isSeckill == 1) {
					isSeckill = 1;
					seckillID = data.context.seckillID;
					$(".seckill-div").css("display", "flex");
					var myDate = new Date();
					var pdata = myDate.getFullYear() + '-' +  (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + data.context.seckillEndTime;
					countDown(pdata, "countDown");
					$(".goods-price .price-span").text(data.context.seckillPrice/100);
					$(".goods-price .original-price").text(data.context.price/100).show();
				}else{
					$(".goods-price .price-span").text(data.context.price/100);
				}
				setBanner(bannerList);//设置banner图片
				setGoodsMark(goodsMarkList);//商品印记
				setEvaluateList(evaluateList);//用户评论
				infoImageList.length == 0 && $(".goods-detail-title-div").hide();
				setInfoImageList(infoImageList);
				tempStatus = data.context.status;
				if (tempStatus == 0) {
					$(".payment-bar .add-shopping-car").css("background", "#E3E3E3");
					$(".payment-bar .buy-now").css("background", "#E3E3E3");
				}
				$(".comment-title").text("全部评论("+ data.context.evaluationCount+")");
				$(".review-info .addr span").text(data.context.merchantAddress);
				$(".goods-info .num").text(data.context.allGoods);
				$(".merchant-image").attr("src", data.context.merchantLogo);
				$(".merchant-phone").text(data.context.merchantPhone);
				$(".merchant-name").text(data.context.merchantName);
				$(".goods-name").text(data.context.goodsFullName);
				$(".comment-num").text("查看全部评论>>");
				if (data.context.videoUrl == "" || data.context.videoUrl == null) {
					$(".goods-detail-div video").hide();
				} else {
//					$(".goods-detail-div video").poster(data.context.videoImage);
					$(".goods-detail-div video").attr("poster", data.context.videoImage);
					$(".goods-detail-div video").html("<source src="+data.context.videoUrl+">");
				}
	    			$(".goods-min-img").attr("src", data.context.goodsImg);
	    			$(".specifications-div .price-span").text(data.context.price/100);
	    			$(".specifications-div .price-span-hide").text(data.context.price/100);
	    			$("#stockDiv").text("库存：" + data.context.stock);
				$(".stock-span-hide").text(data.context.stock);
	    			isPraise = data.context.isPraise;
	    			isCollection = data.context.isCollection;
	    			if (data.context.isPraise == 1) {
	    				$(".praise-menu-icon").css("background-image", "url(../img/goods/praiseed_icon.png)");
	    			}
	    			if (data.context.isCollection == 1) {
	    				$(".collection-menu-icon").css("background-image", "url(../img/goods/collectioned_icon.png)");
	    			}
			} else {
				mui.toast(data.msg);
			}
		}
		function setBanner(bannerList) {
			var html = '';
			for (var index in bannerList) {
				html += getBannerListItem(bannerList[index], index);
			}
			$(".swiper-wrapper").html(html);
		}
		function getBannerListItem(item,index) {
			var html = '';
			html += '<div class="swiper-slide" style="background-image: url('+item+');" data-index="'+index+'"></div>'
			return html;
		}
		function setGoodsMark(bannerList) {
			var html = '';
			for (var index in bannerList) {
				html += getGoodsListItem(bannerList[index], index);
			}
			$(".mark-title-container").html(html);
		}
		function getGoodsListItem(item,index) {
			var html = '';
			html += '<div class="item-title">'+item.markName+'</div>'
			return html;
		}
		function setEvaluateList(evaluateList) {
			var html = '';
			for (var index in evaluateList) {
				html += getEvaluateList(evaluateList[index], index);
			}
			$("#commentList").html(html);
		}
		function getEvaluateList(item,index) {
			var html = '';
			html += '<div class="comment-content-div">'
			html += '	<div class="left-div">'
			html += '		<img class="comment-header-img" src="'+item.headImg+'" />'
			html += '		<span class="comment-username">'+item.name+'</span>'
			html += '	</div>'
			html += '	<div class="right-div">'
			html += '		<div class="comment-content">'+item.content+'</div>'
			html += '		<div class="comment-date-div">'
			html += '			<span class="date">'+item.createTime+'</span>'
			html += '			<div class="star-div">'
			for (var i=0;i < 5; i++) {
				if (i<item.stars) {
					html += '			<img class="star-icon" src="../img/person/star.png" />'
				} else {
					html += '			<img class="star-icon" src="../img/person/star_h.png" />'
				}
			}
			html += '			</div>'
			html += '		</div>'
			html += '	</div>'
			html += '</div>'
			return html;
		}
		function setInfoImageList(infoImageList) {
			var html = '';
			for (var index in infoImageList) {
				html += getInfoImageList(infoImageList[index], index);
			}
			$("#infoImageList").html(html);
		}
		function getInfoImageList(item,index) {
			var html = '';
			html += '<img class="goods-detail-img" src="'+item+'" />'
			return html;
		}
		$(".goods-attribute-bottom").on('tap','.praise-menu-icon',function(){
			var url = '';
			if (isPraise == 0) {
				url = base.url.addPraiseLog;
			} else if (isPraise == 1) {
				url = base.url.delPraiseLog;
			} else {
				mui.toast("数据错误");
				return;
			}
			var data = {
				userID: userID,
				goodsID: goodsID,
				merchantID: merchantID
			}
			base.postData(url,data, function(data) {
				if (data.success) {
					if (isPraise == 0) {
						isPraise = 1;
						$(".praise-menu-icon").css("background-image", "url(../img/goods/praiseed_icon.png)");
					} else {
						isPraise = 0;
						$(".praise-menu-icon").css("background-image", "url(../img/goods/praise_norm_icon.png)");
					}
				} else {
					mui.toast(data.msg);
				}
			});
		});
		$(".goods-attribute-bottom").on('tap','.collection-menu-icon',function(){
			var url = '';
			if (isCollection == 0) {
				url = base.url.addCollection;
			} else if (isCollection == 1) {
				url = base.url.delCollection;
			} else {
				mui.toast("数据错误");
				return;
			}
			var data = {
				userID: userID,
				goodsID: goodsID,
				merchantID: merchantID
			}
			base.postData(url,data, function(data) {
				if (data.success) {
					if (isCollection == 0) {
						isCollection = 1;
						$(".collection-menu-icon").css("background-image", "url(../img/goods/collectioned_icon.png)");
					} else {
						isCollection = 0;
						$(".collection-menu-icon").css("background-image", "url(../img/goods/collection_norm_icon.png)");
					}
				} else {
					mui.toast(data.msg);
				}
			});
		});
		$('.bounced-menu-div').on('tap', 'div[id^="item"]', function() {
			var typeID = $(this).data('id');
			switch (typeID){
				case 0://回到首页
					mui.back(); //返回上个页面
					break;
				case 1: //跳转到购物车页面
					window.location.href = "index.html?userID="+userID;
					break;
				case 2:
					window.location.href = "shoppingCar.html?userID="+userID+'&merchantID='+merchantID;
					break;
				default:
					break;
			}
		});
		function getStandard() {
			var url = base.url.getStandard;
			var data = {
				userID: userID,
				goodsID: goodsID
			}
			base.postData(url,data,getStandardData);
		}
		function getStandardData(data) {
			if (data.success) {
				standardPriceList = data.context.price;
				standardDataList = data.context.data;
				if (standardDataList.length > 0) {//判断商品是否有规格 有规格弹出选择规格的框 反之则直接购买
					var html = '';
					for (var i in standardDataList) {
						html += getListItem(standardDataList[i], i);
					}
					$("#specificationsID").html(html);
					$("video").hide();
					$(".bounced-box-container").show();
				} else {
					if (isBuyNow == 1) { //没有规格时的 立即购买
						var tempSubtotal = $(".specifications-div .price-span").text();
						var tempPrice = $(".specifications-div .price-span").text()
						goSubmitOrder(1, tempSubtotal, "该商品没有规格", tempPrice);
					} else {
						//直接添加到购物车
						addShoppingCart();
					}
				}
			} else {
				mui.toast(data.msg);
			}
		}
		//直接购买 跳过购物车
		function goSubmitOrder(tempNumber, tempSubtotal, tempStandard, tempPrice) {
			var goodsStandardList = [];
			var totalPrice = 0;
			if (isSeckill == 1) {
				tempPrice = $(".goods-price .price-span").text();
				totalPrice = $(".shop-arithmetic .num").text() * $(".goods-price .price-span").text();
			}else{
				totalPrice = $(".specifications-div .price-span").text();
			}
			var parms = {
				goodsID: goodsID,
				number: tempNumber,
				standardID: tempStandardID,
				subtotal: tempSubtotal,
				goodsImg: $(".goods-min-img").attr("src"),
				goodsName: $(".goods-name").text(),
				standard: tempStandard,
				shoopingCartID: 0,
				price: tempPrice
			}
			goodsStandardList.push(parms);//组建商品的数组
			window.localStorage.setItem("goodsStandardList", JSON.stringify(goodsStandardList));
			window.location.href = "submitOrder.html?userID="+ userID+"&totalPrice="+ totalPrice +"&totalNum="+tempNumber+'&merchantID='+merchantID+'&isSeckill='+isSeckill+'&seckillID='+seckillID;
		}
		function getListItem(item,index) {
			var html = '';
			html += '<div class="item-specifications">'
			html += '	<div class="specifications-title">'+item.standard+'</div>'
			html += '	<div class="mark-title-container">'
			for (var j in item.specDataList) {
				html += '	<div class="specifications-item-title"><span class="standard-name">'+ item.specDataList[j].name + '</span><span class="standard-span">'+item.specDataList[j].id+'</span></div>'
			}
			html += '	</div>'
			html += '</div>'
			return html;
		}
		$("#specificationsID").on("tap", ".specifications-item-title", function() {
			$(this).parent().find('div').removeClass("selected");
			$(this).toggleClass("selected");
			var tempIndex = 0;
			var _standardName = ""; //每选中一次规格后的名称字符串组合
			var _standardID = ""; //每选中一次规格后的规格ID字符串组合
			$("#specificationsID").find(".specifications-item-title").each(function() { 
		        if($(this).hasClass("selected")) {
		        		tempIndex+=1;
		        		var tempID = $(this).find(".standard-span").text();
		        		_standardID+=tempID;
		        		_standardID+="-";
		        		var standardName = $(this).find(".standard-name").text();
	        			_standardName+=standardName + "   ";
		        }
		        if (tempIndex == standardDataList.length) {
		        		for (var i = 0; i < standardPriceList.length; i++) {
		        			var _goodsLastAttr = standardPriceList[i].goodsLastAttr;
		        			if (_standardID.indexOf(_goodsLastAttr)>=0) {
		        				tempStandardID = standardPriceList[i].id;
		        				$(".specifications-div .price-span").text(standardPriceList[i].price/100);
	    						$(".specifications-div .price-span-hide").text(standardPriceList[i].price/100);
	    						$("#stockDiv").text("库存：" + standardPriceList[i].stock);
	    						$(".stock-span-hide").text(standardPriceList[i].stock);
	    						totalPrice();
		        			}
		        		}
		        }
		   });
		   _standardID = _standardID.substring(0, _standardID.length-1);//这里放在最后来截取字符串 防止循环时多截取数据
		   console.log("=====", _standardName, _standardID);
		   tempStandard = _standardID;
		   tempStandardName = _standardName;
		   $("#standardDiv").text("已选规格：" + tempStandardName);
		})
		// 数量减
		$(".minus").click(function() {
			var t = $(this).parent().find('.num');
			t.text(parseInt(t.text()) - 1);
			if (t.text() <= 1) {
				t.text(1);
			}
			totalPrice();
		});
		// 数量加
		$(".plus").click(function() {
			var t = $(this).parent().find('.num');
			t.text(parseInt(t.text()) + 1);
			if (t.text() <= 1) {
				t.text(1);
			}
			totalPrice();
		});
		function totalPrice() {//计算总价
	        var num = parseInt($(".shop-arithmetic .num").text()); //得到商品的数量
	        var price = parseFloat($(".specifications-div .price-span-hide").text()); //得到商品的单价
	        var total = price * num; //计算商品的总价
	    		$(".specifications-div .price-span").text(total.toFixed(2)); //输出总价
		}
		$(".bounced-box-container .outside .box").on("tap", ".close-div", function() {
			$("video").show();
			$(".bounced-box-container").hide();
			return false;
		})
		$(".bounced-box-container").click(function(){
			$("video").show();
		    $(".bounced-box-container").hide();
		});
		$(".bounced-box-container .outside").click(function(event){
		    event.stopPropagation();
		});
		$("#commentList").on("tap", ".comment-content-div", function() {
		    window.location.href = "goodsReview.html?userID=" + userID + "&goodsID=" + goodsID;
		});
		$(".bounced-box-container").on("tap", ".confirm-btn", function() {
			var isChoose = false;
			for (var i = 0; i < standardPriceList.length; i++) {
        			if (standardPriceList[i].goodsLastAttr == tempStandard) {
        				isChoose = true;
        			}
        		}
			if (isChoose) {
				var _stock =$(".stock-span-hide").text(); //获取选中的商品规格的库存数量
				if (isBuyNow == 1) { //立即购买
					if (_stock > 0) { 
						var tempNumber = $(".shop-arithmetic .num").text();
						var tempPrice = parseFloat($(".specifications-div .price-span-hide").text());
						var tempSubtotal = parseFloat($(".specifications-div .price-span").text());
						var num = parseInt($(".shop-arithmetic .num").text());
						goSubmitOrder(tempNumber, tempSubtotal, tempStandardName, tempPrice);
					} else {
						mui.toast("该商品库存已不足");
					}
				} else {
					if (_stock > 0) {
						addShoppingCart();//加入购物车
					} else {
						mui.toast("库存不足，重新选规格吧！");
					}
				}
			} else {
				mui.toast("请选择商品的规格");
			}
			
		});
		function addShoppingCart() {
			var url = base.url.addShoppingCart;
			var data = {};
			if (isSeckill == 1) {
				data = {
					userID: userID,
					goodsID: goodsID,
					seckillID:seckillID,
					isSeckill:isSeckill,
					number:$(".shop-arithmetic .num").text(),
					standardID: tempStandardID,
					merchantID: merchantID,
					subtotal:$(".shop-arithmetic .num").text() * $(".goods-price .price-span").text()
				}
			}else {
				data = {
					userID: userID,
					goodsID: goodsID,
					isSeckill:isSeckill,
					number:$(".shop-arithmetic .num").text(),
					standardID: tempStandardID,
					merchantID: merchantID,
					subtotal:$(".specifications-div .price-span").text()
				}
			}
			base.postData(url,data,addShoppingCartData);
		}
		function addShoppingCartData(data) {
			if (data.success) {
				$("video").show();
				$(".bounced-box-container").hide();
				mui.toast(data.msg);
			} else {
				mui.toast(data.msg);
			}
		}
		//加入购物车
		$(".payment-bar").on('tap','.add-shopping-car',function(){
			if (tempStatus == 0) {
				mui.toast("该商品已下架")
				return;
			}
			isBuyNow = 0;
			getStandard();
		});
		//立即购买
		$(".payment-bar").on('tap','.buy-now',function(){
			if (tempStatus == 0) {
				mui.toast("该商品已下架")
				return;
			}
			isBuyNow = 1;
			getStandard();
		});
		//拨打客服电话
		$(".payment-bar").on('tap','.call',function(){
			var merchantPhone = $(".merchant-phone").text();
			window.location.href = 'tel://'+merchantPhone;
		});
		$(".merchant-detail-div").click(function() {
			window.location.href = "merchant.html?userID="+ userID+"&merchantID="+merchantID;
		})
		//倒计时
		function countDown(startTime, obj){
			setInterval(function () {
			    var nowtime = new Date();
			    startTime = new Date(startTime);
			    var time = startTime - nowtime;
	//		    var day = parseInt(time / 1000 / 60 / 60 / 24);
			    var hour = parseInt(time / 1000 / 60 / 60 % 24);
			    var minute = parseInt(time / 1000 / 60 % 60);
			    var seconds = parseInt(time / 1000 % 60);
			    if (hour < 10) {
			    	hour = "0" + hour;
			    }
			    if (minute < 10) {
			    	minute = "0" + minute;
			    }
			    if (seconds < 10) {
			    	seconds = "0" + seconds;
			    }
			    $("#"+obj).html(hour + ":" + minute + ":" + seconds);
			}, 1000);
		}
	  </script>
</html>
